import { history } from 'umi';
import React, { useState } from 'react';
import { Sticky, Swiper, Popover, Search, Image, Flex, Card, Divider, Tabbar, Button } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import { Wechat } from '@react-vant/icons';
import { GoodOne, Order, System, Comment, Me, Female } from '@icon-park/react';
import './index.less';
import logo from '../assets/logo.svg';
import swiper01 from '../assets/swiper/swiper01.png';
import swiper02 from '../assets/swiper/swiper02.png';
import swiper03 from '../assets/swiper/swiper03.png';
import swiper04 from '../assets/swiper/swiper04.png';

const actions = [{ text: '武汉' }, { text: '长沙', disabled: true }, { text: '成都', disabled: true }];

const goDiscover = () => {
  history.push('/');
}
const goMsg = () => {
  history.push('/msg');
}
const goMy = () => {
  history.push('/my');
}
const goSearch = () => {
  history.push('/search');
}
const goPartner = () => {
  history.push('/partner');
}
const goHot = () => {
  history.push('/hot');
}
const goSelf = () => {
  history.push('/self');
}

export default function HomePage() {
  const [name, setName] = React.useState('discover')
  const [searchValue, setSearchValue] = useState('');
  return (
    <div className='home'>
      <Sticky>
        <header className='header'>
          <Flex className='header-box' align='center' justify='between'>
            <Flex.Item className='logo' span={3}>
              <img src={logo} alt='logo' />
            </Flex.Item>
            <Flex.Item className='choose-area' span={3}>
              <Popover
                placement='bottom-start'
                actions={actions}
                reference={<div className='current-area'>武汉</div>}
              />
            </Flex.Item>
            <Flex.Item className='search-area'>
              <Search className='search-box' value={searchValue} onChange={setSearchValue} clearable
                      placeholder='搜索昵称' shape='round' onClickInput={goSearch} />
            </Flex.Item>
            <Flex.Item className='top-service' span={6}>
              <Button className='top-service-btn' icon={<Wechat fontSize='1.5em' />} color='#43cf7c' size='small' round>客服</Button>
            </Flex.Item>
          </Flex>
        </header>
      </Sticky>
      <div className='home-swiper'>
        <Swiper autoplay={5000}>
          <Swiper.Item>
            <Image lazyload src={swiper01} />
          </Swiper.Item>
          <Swiper.Item>
            <Image lazyload src={swiper02} />
          </Swiper.Item>
          <Swiper.Item>
            <Image lazyload src={swiper03} />
          </Swiper.Item>
          <Swiper.Item>
            <Image lazyload src={swiper04} />
          </Swiper.Item>
        </Swiper>
      </div>
      <div className='sections container'>
        <Flex gutter={10}>
          <Flex.Item span={12} onClick={goHot}>
            <div className='section-item hot'>
              <h5 className='title'>人气推荐</h5>
              <p className='desc'>超人气陪玩 强力推荐</p>
              <div className='pic'><GoodOne theme='filled' size='48'/></div>
            </div>
          </Flex.Item>
          <Flex.Item span={12} onClick={goSelf}>
            <div className='section-item sel'>
              <h5 className='title'>自助下单</h5>
              <p className='desc'>客户发需求 陪玩来报名</p>
              <div className='pic'><Order theme='filled' size='48' /></div>
            </div>
          </Flex.Item>
        </Flex>
      </div>
      <div className='container'>
        <h3 className='partner-title'>颜值女神</h3>
        <div className='partner-list'>
          <Card round className='partner-card' onClick={goPartner}>
            <Card.Body>
              <Flex direction='row'>
                <Flex.Item span={6} className='partner-avatar'>
                  <Image round width='60' height='60' fit='cover'
                         src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg'/>
                  <div className='auth-badge'>真人认证</div>
                </Flex.Item>
                <Flex.Item span={18}>
                  <Flex direction='column' gutter={5}>
                    <Flex.Item>
                      <Flex justify='between' align='center'>
                        <Flex.Item>
                          <Flex gutter={10} align='center'>
                            <Flex.Item><h3 className='partner-name'>小熊</h3></Flex.Item>
                            <Flex.Item>
                              <Flex gutter={2} align='center' className='partner-age'>
                                <Flex.Item><Female className='gender-icon' theme='outline'/></Flex.Item>
                                <Flex.Item>23</Flex.Item>
                              </Flex>
                            </Flex.Item>
                          </Flex>
                        </Flex.Item>
                        <Flex.Item className='partner-status'>
                          <div className='kong'><i className='dot'></i>空闲</div>
                        </Flex.Item>
                      </Flex>
                    </Flex.Item>
                    <Flex.Item className='partner-details'>
                      170cm <span>|</span> 48kg <span>|</span> 射手座
                    </Flex.Item>
                    <Flex.Item className='partner-tags'>
                      <div className='tag tag1'>密室达人</div>
                      <div className='tag tag2'>酒搭子</div>
                      <div className='tag tag3'>氛围制造者</div>
                    </Flex.Item>
                    <Flex.Item className='partner-photos'>
                      <Flex gutter={10}>
                        <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                   src='//res.dayupp.com/partner/2f49c01e5bfa4a43576c82b0ce11aa87.jpg'/></Flex.Item>
                        <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                   src='//res.dayupp.com/partner/050b7f06be14e84c6b82d06752dbca39.jpg'/></Flex.Item>
                        <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                   src='//res.dayupp.com/partner/6546da46f1d883b88b25593baa6d1b88.jpg'/></Flex.Item>
                      </Flex>
                    </Flex.Item>
                  </Flex>
                </Flex.Item>
              </Flex>
            </Card.Body>
          </Card>
          <Card round className='partner-card' onClick={goPartner}>
            <Card.Body>
              <Flex direction='row'>
                <Flex.Item span={6} className='partner-avatar'>
                  <Image round width='60' height='60' fit='cover'
                         src='//res.dayupp.com/partner/92ecdf73508293cf9d3ac70518b32925.jpg'/>
                  {/*<div className='auth-badge'>真人认证</div>*/}
                </Flex.Item>
                <Flex.Item span={18}>
                  <Flex direction='column' gutter={5}>
                    <Flex.Item>
                      <Flex justify='between' align='center'>
                        <Flex.Item>
                          <Flex gutter={10} align='center'>
                            <Flex.Item><h3 className='partner-name'>真真</h3></Flex.Item>
                            <Flex.Item>
                              <Flex gutter={2} align='center' className='partner-age'>
                                <Flex.Item><Female className='gender-icon' theme='outline'/></Flex.Item>
                                <Flex.Item>22</Flex.Item>
                              </Flex>
                            </Flex.Item>
                          </Flex>
                        </Flex.Item>
                        <Flex.Item className='partner-status'>
                          <div className='busy'><i className='dot'></i>忙碌</div>
                        </Flex.Item>
                      </Flex>
                    </Flex.Item>
                    <Flex.Item className='partner-details'>
                      165cm <span>|</span> 49kg <span>|</span> 摩羯座
                    </Flex.Item>
                    <Flex.Item className='partner-tags'>
                      <div className='tag tag1'>御姐</div>
                      <div className='tag tag2'>电竞少女</div>
                      <div className='tag tag3'>情感导师</div>
                    </Flex.Item>
                    <Flex.Item className='partner-photos'>
                      <Flex gutter={10}>
                        <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                   src='//res.dayupp.com/partner/880904ffc317c2a91df9a7c12a17071a.jpg'/></Flex.Item>
                        <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                   src='//res.dayupp.com/partner/cef1e1d229f2f5aaeed3088d8944ab93.jpg'/></Flex.Item>
                        <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                   src='//res.dayupp.com/partner/f0ec176a1f3f3a73c3079a15f91f10d2.jpg'/></Flex.Item>
                      </Flex>
                    </Flex.Item>
                  </Flex>
                </Flex.Item>
              </Flex>
            </Card.Body>
          </Card>
          <Card round className='partner-card' onClick={goPartner}>
            <Card.Body>
              <Flex direction='row'>
                <Flex.Item span={6} className='partner-avatar'>
                  <Image round width='60' height='60' fit='cover'
                         src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg'/>
                  <div className='auth-badge'>真人认证</div>
                </Flex.Item>
                <Flex.Item span={18}>
                  <Flex direction='column' gutter={5}>
                    <Flex.Item>
                      <Flex justify='between' align='center'>
                        <Flex.Item>
                          <Flex gutter={10} align='center'>
                            <Flex.Item><h3 className='partner-name'>婉儿</h3></Flex.Item>
                            <Flex.Item>
                              <Flex gutter={2} align='center' className='partner-age'>
                                <Flex.Item><Female className='gender-icon' theme='outline'/></Flex.Item>
                                <Flex.Item>23</Flex.Item>
                              </Flex>
                            </Flex.Item>
                          </Flex>
                        </Flex.Item>
                        <Flex.Item className='partner-status'>
                          <div className='kong'><i className='dot'></i>空闲</div>
                        </Flex.Item>
                      </Flex>
                    </Flex.Item>
                    <Flex.Item className='partner-details'>
                      170cm <span>|</span> 48kg <span>|</span> 射手座
                    </Flex.Item>
                    <Flex.Item className='partner-tags'>
                      <div className='tag tag1'>密室达人</div>
                      <div className='tag tag2'>酒搭子</div>
                      <div className='tag tag3'>氛围制造者</div>
                    </Flex.Item>
                    <Flex.Item className='partner-photos'>
                      <Flex gutter={10}>
                        <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                   src='//res.dayupp.com/partner/2f49c01e5bfa4a43576c82b0ce11aa87.jpg'/></Flex.Item>
                        <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                   src='//res.dayupp.com/partner/050b7f06be14e84c6b82d06752dbca39.jpg'/></Flex.Item>
                        <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                   src='//res.dayupp.com/partner/6546da46f1d883b88b25593baa6d1b88.jpg'/></Flex.Item>
                      </Flex>
                    </Flex.Item>
                  </Flex>
                </Flex.Item>
              </Flex>
            </Card.Body>
          </Card>
          <Card round className='partner-card' onClick={goPartner}>
            <Card.Body>
              <Flex direction='row'>
                <Flex.Item span={6} className='partner-avatar'>
                  <Image round width='60' height='60' fit='cover'
                         src='//res.dayupp.com/partner/92ecdf73508293cf9d3ac70518b32925.jpg'/>
                  <div className='auth-badge'>真人认证</div>
                </Flex.Item>
                <Flex.Item span={18}>
                  <Flex direction='column' gutter={5}>
                    <Flex.Item>
                      <Flex justify='between' align='center'>
                        <Flex.Item>
                          <Flex gutter={10} align='center'>
                            <Flex.Item><h3 className='partner-name'>ISS</h3></Flex.Item>
                            <Flex.Item>
                              <Flex gutter={2} align='center' className='partner-age'>
                                <Flex.Item><Female className='gender-icon' theme='outline'/></Flex.Item>
                                <Flex.Item>22</Flex.Item>
                              </Flex>
                            </Flex.Item>
                          </Flex>
                        </Flex.Item>
                        <Flex.Item className='partner-status'>
                          <div className='busy'><i className='dot'></i>忙碌</div>
                        </Flex.Item>
                      </Flex>
                    </Flex.Item>
                    <Flex.Item className='partner-details'>
                      165cm <span>|</span> 49kg <span>|</span> 摩羯座
                    </Flex.Item>
                    <Flex.Item className='partner-tags'>
                      <div className='tag tag1'>御姐</div>
                      <div className='tag tag2'>电竞少女</div>
                      <div className='tag tag3'>情感导师</div>
                    </Flex.Item>
                    <Flex.Item className='partner-photos'>
                      <Flex gutter={10}>
                        <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                   src='//res.dayupp.com/partner/880904ffc317c2a91df9a7c12a17071a.jpg'/></Flex.Item>
                        <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                   src='//res.dayupp.com/partner/cef1e1d229f2f5aaeed3088d8944ab93.jpg'/></Flex.Item>
                        <Flex.Item span={8}><Image radius='6' fit='cover' height='96'
                                                   src='//res.dayupp.com/partner/f0ec176a1f3f3a73c3079a15f91f10d2.jpg'/></Flex.Item>
                      </Flex>
                    </Flex.Item>
                  </Flex>
                </Flex.Item>
              </Flex>
            </Card.Body>
          </Card>
        </div>
        <Divider>没有更多了</Divider>
      </div>
      <Tabbar value={name} onChange={v => setName(v as string)} className='tabbar' activeColor='#8c57ff' placeholder>
        <Tabbar.Item name='discover' icon={<System theme='outline' size='24'/>} onClick={goDiscover}>发现</Tabbar.Item>
        <Tabbar.Item name='message' icon={<Comment theme='outline' size='24'/>} onClick={goMsg}>消息</Tabbar.Item>
        <Tabbar.Item name='my' icon={<Me theme='outline' size='24'/>} onClick={goMy}>我的</Tabbar.Item>
      </Tabbar>
      <SafeArea position='bottom' />
    </div>
  );
}